<template>
    <div class="bannerLayout">
        <!-- 标题 -->
        <Title>
            <template #default>{{ title }}</template>
        </Title>
        <!-- 内容区 -->
        <section class="contentLayout" v-loading="loading">
            <!-- 表单设置 -->
            <div class="tableSet">
                <div>
                    <button class="addI0" @click="showForm(ruleFormRef)">
                        <div class="iconPlus">
                            <el-icon><Plus /></el-icon>
                        </div>
                        <div class="text">新建</div>
                    </button>
                </div>
                <div>
                    <el-tooltip content="刷新" placement="top">
                        <el-icon size="19" @click="Refresh">
                            <RefreshRight />
                        </el-icon>
                    </el-tooltip>
                </div>
                <div>
                    <el-tooltip content="密度" placement="top">
                        <el-dropdown
                            ref="dropdown1"
                            trigger="contextmenu"
                            @command="hCommand($event)"
                        >
                            <el-icon size="19" @click="GapSize">
                                <Sort />
                            </el-icon>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item command="default">
                                        {{ textSize[0] }}
                                    </el-dropdown-item>
                                    <el-dropdown-item command="midden">
                                        {{ textSize[1] }}
                                    </el-dropdown-item>
                                    <el-dropdown-item command="small">
                                        {{ textSize[2] }}
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </el-tooltip>
                </div>
                <div>
                    <el-tooltip content="列设置" placement="top">
                        <div>
                            <el-popover
                                placement="bottom-start"
                                :width="200"
                                trigger="click"
                            >
                                <template #reference>
                                    <el-icon size="19">
                                        <Setting />
                                    </el-icon>
                                </template>
                                <el-tree
                                    ref="treeRef"
                                    style="max-width: 600px"
                                    :data="headerList"
                                    show-checkbox
                                    node-key="id"
                                    default-expand-all
                                    :expand-on-click-node="false"
                                    check-on-click-node
                                    @check-change="nodeChange"
                                    :default-checked-keys="headerTableList"
                                    :props="{
                                        children: 'children',
                                        label: 'label',
                                    }"
                                />
                            </el-popover>
                        </div>
                    </el-tooltip>
                </div>
            </div>
            <!-- 表单内容 -->
            <div class="tabContent">
                <el-table
                    :data="list"
                    style="width: 100%"
                    :size="tableSize"
                    header-cell-class-name="btou"
                    table-layout="fixed"
                    row-key="id"
                >
                    <el-table-column
                        type="index"
                        label="序号"
                        width="80"
                        v-if="headerTableList.indexOf(1) == -1 ? false : true"
                    />
                    <el-table-column
                        prop="name"
                        label="名称"
                        min-width="94"
                        v-if="headerTableList.indexOf(2) == -1 ? false : true"
                    />
                    <el-table-column
                        label="图片地址"
                        min-width="85"
                        v-if="headerTableList.indexOf(3) == -1 ? false : true"
                    >
                        <template #default="scope">
                            <div>
                                <el-image
                                    style="width: 32px; height: 32px"
                                    :src="scope.row.full_url"
                                    fit="cover"
                                >
                                    <template #error>
                                        <div
                                            class="image-slot"
                                            style="width: 100%; height: 100%"
                                        >
                                            <el-icon
                                                style="
                                                    width: 100%;
                                                    height: 100%;
                                                    font-size: 20px;
                                                "
                                            >
                                                <Picture />
                                            </el-icon>
                                        </div>
                                    </template>
                                </el-image>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        label="图片跳转链接类型"
                        min-width="150"
                        v-if="headerTableList.indexOf(4) == -1 ? false : true"
                    >
                        <template #default="scope">
                            <div>
                                {{
                                    scope.row.type == 0
                                        ? " http(外部)"
                                        : "(微信内部)"
                                }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="href"
                        label="图片跳转地址"
                        min-width="205"
                        v-if="headerTableList.indexOf(5) == -1 ? false : true"
                    />
                    <el-table-column
                        prop="enable_status"
                        label="是否启用"
                        min-width="85"
                        v-if="headerTableList.indexOf(6) == -1 ? false : true"
                    >
                        <template #default="scope">
                            <div>
                                {{
                                    scope.row.enable_status == 1
                                        ? "启用"
                                        : "关闭"
                                }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="weight"
                        label="推荐值"
                        width="72"
                        v-if="headerTableList.indexOf(7) == -1 ? false : true"
                    />
                    <el-table-column
                        label="操作"
                        min-width="80"
                        v-if="headerTableList.indexOf(8) == -1 ? false : true"
                    >
                        <template #default="scope">
                            <div style="display: flex; justify-content: center">
                                <el-button
                                    text
                                    type="primary"
                                    size="small"
                                    class="del"
                                    @click="updataBanner(scope.row)"
                                >
                                    编辑
                                </el-button>
                                <el-button
                                    text
                                    type="primary"
                                    size="small"
                                    class="del"
                                    @click="deleteBanner(scope.row)"
                                >
                                    删除
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 对话框 -- 嵌套表单数据 -- 新建轮播图数据 -->
            <el-dialog
                v-model="dialogFormVisible"
                :title="formTitle"
                width="640"
            >
                <!-- 表单项 -->
                <el-form
                    :model="formData"
                    :rules="rules"
                    size="default"
                    status-icon
                    ref="ruleFormRef"
                >
                    <el-form-item
                        label="图片名称"
                        label-width="140px"
                        prop="name"
                        :label-position="itemLabelPosition"
                    >
                        <el-input
                            placeholder="请输入名称"
                            v-model="formData.name"
                            autocomplete="off"
                        />
                    </el-form-item>
                    <el-form-item
                        label="是否启用"
                        label-width="140px"
                        prop="enable_status"
                        :label-position="itemLabelPosition"
                    >
                        <el-select
                            v-model="formData.enable_status"
                            placeholder="请选择是否启用"
                        >
                            <el-option label="启用" :value="0" />
                            <el-option label="关闭" :value="1" />
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        label="图片跳转地址"
                        label-width="140px"
                        prop="href"
                        :label-position="itemLabelPosition"
                    >
                        <el-input
                            placeholder="请输入图片跳转地址"
                            v-model="formData.href"
                            autocomplete="off"
                        />
                    </el-form-item>
                    <el-form-item
                        label="跳转类型"
                        label-width="140px"
                        prop="type"
                        :label-position="itemLabelPosition"
                    >
                        <el-select
                            v-model="formData.type"
                            placeholder="请选择图片跳转类型"
                        >
                            <el-option label="http类型" :value="0" />
                            <el-option label="公众号类型" :value="1" />
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        label="推荐值(0为为推荐)"
                        label-width="140px"
                        prop="weight"
                        :label-position="itemLabelPosition"
                    >
                        <el-input
                            placeholder="请输入"
                            v-model.number="formData.weight"
                            autocomplete="off"
                        />
                    </el-form-item>
                    <el-form-item
                        label="上传图片"
                        label-width="140px"
                        prop="url"
                        :label-position="itemLabelPosition"
                    >
                        <el-upload
                            action="#"
                            :show-file-list="false"
                            :auto-upload="false"
                            :multiple="false"
                            :on-change="uploadFile"
                        >
                            <img
                                v-if="imageUrl"
                                :src="imageUrl"
                                class="avatar"
                                style="
                                    width: 102px;
                                    height: 102px;
                                    object-fit: cover;
                                "
                            />
                            <div v-else class="uploadImg">
                                <el-icon><Plus /></el-icon>
                                <div>上传图片</div>
                            </div>
                        </el-upload>
                    </el-form-item>
                </el-form>
                <!-- 提交表单 -->
                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">
                            取消
                        </el-button>
                        <el-button
                            type="primary"
                            @click="addBanner(ruleFormRef)"
                        >
                            确认
                        </el-button>
                    </div>
                </template>
            </el-dialog>
            <!-- 分页组件 -->
            <div class="example-pagination-block pageCom">
                <div class="example-demonstration">
                    第 {{ (currentPage - 1) * pageObj.per_page + 1 }}-{{
                        pageObj.total > currentPage * pageObj.per_page
                            ? currentPage * pageObj.per_page
                            : pageObj.total
                    }}
                    条/总共 {{ pageObj.total }} 条
                </div>
                <el-pagination
                    layout="prev, pager, next"
                    :total="pageObj.total"
                    :page-size="pageObj.per_page"
                    size="small"
                    :current-page="currentPage"
                    @current-change="currentChange"
                />
            </div>
        </section>
    </div>
</template>
    
<script setup>
import Title from "components/public/Title";
import { useRoute } from "vue-router";
import {
    getBannerList,
    PostBannerStore,
    PostUpload,
    PutUpdata,
    deleteData,
} from "@/network/banner";
import { onMounted, reactive, ref } from "vue";

const route = useRoute();
const title = route.meta.title;

//初始化
onMounted(() => {
    BannerList();
});

// 分页组件
const pageObj = ref({}); //分页对象
const currentPage = ref(1); // 当前页数
//当前页改变时触发方法
const currentChange = (page) => {
    currentPage.value = page;
    // console.log(currentPage.value);
    Refresh();
};

// 获取轮播图列表
const list = ref([]);
const BannerList = async () => {
    await getBannerList(currentPage.value).then((res) => {
        // console.log(res);
        list.value = res.data.data.list;
        // console.log(list.value);
        pageObj.value = res.data.meta;
        // console.log(pageObj.value);
    });
    loading.value = false;
};

// 刷新页面,并重新请求页面
const loading = ref(false); // 刷新
const Refresh = () => {
    // console.log("重新请求");
    loading.value = true;
    BannerList();
};
// 改变表格大小
const dropdown1 = ref(); //显示尺寸按钮
const tableSize = ref("default"); //表格尺寸大小
const GapSize = () => {
    // console.log("间隔大小");
    // console.log(dropdown1.value);
    if (!dropdown1) return;
    dropdown1.value.handleOpen();
};
const textSize = ref(["默认", "中等 *", "紧凑"]);
function hCommand(e) {
    if (e == "default") {
        tableSize.value = "large";
        textSize.value = ["默认 *", "中等", "紧凑"];
    } else if (e == "midden") {
        tableSize.value = "default";
        textSize.value = ["默认", "中等 *", "紧凑"];
    } else if (e == "small") {
        tableSize.value = "small";
        textSize.value = ["默认", "中等", "紧凑 *"];
    } else {
        tableSize.value = "";
    }
}
// 表头中标签的展示和隐藏
const treeRef = ref();
const headerTableList = ref([1, 2, 3, 4, 5, 6, 7, 8]);
const headerList = [
    {
        id: 0,
        label: "列设置", // `<button>重置</button>`
        children: [
            // { id: 20, label: "固定在左侧", children: [] },
            {
                id: 30,
                label: "不固定",
                children: [
                    {
                        id: 1,
                        label: "序号",
                    },
                    {
                        id: 2,
                        label: "名称",
                    },
                    {
                        id: 3,
                        label: "图片地址",
                    },
                    {
                        id: 4,
                        label: "图片跳转链接类型",
                    },
                    {
                        id: 5,
                        label: "图片跳转地址",
                    },
                    {
                        id: 6,
                        label: "是否启用",
                    },
                    {
                        id: 7,
                        label: "推荐值",
                    },
                    {
                        id: 8,
                        label: "操作",
                    },
                ],
            },
            // {
            //     id: 40,
            //     label: "固定在右侧",
            //     children: [],
            // },
        ],
    },
];
// 当节点被点击的时候触发
const nodeChange = (obj) => {
    // console.log(treeRef.value.getCheckedKeys());
    headerTableList.value = treeRef.value.getCheckedKeys();
    // console.log("obj:  ");
    // console.log(obj);
    // console.log(treeRef.value.getNode(20));
    // removeNode();
    // if (obj.id > 0 && obj.id < 12) {
    //     treeRef.value.append(obj, 20);
    // }
};

// 新建轮播图数据
const dialogFormVisible = ref(false); //是否显示表单
const itemLabelPosition = ref("top"); //表单域标签的位置
const ruleFormRef = ref(); //表单的ref名
const formTitle = ref(""); //表单的标题title
const showForm = (formEl) => {
    //显示表单,并初始化
    dialogFormVisible.value = true;
    imageUrl.value = null;
    formTitle.value = "添加";
    formData.value = {
        name: "", //图片名称
        url: "", // 图片地址
        enable_status: null, //是否启用
        href: "", //图片跳转地址
        weight: 0, //推荐值
        type: null, //跳转类型
    };
    if (!formEl) return;
    formEl.resetFields();
    if (formData.value.id) {
        delete formData.value.id; //删除id
    }
};
// 表单初始化
const formData = ref({
    name: "", //图片名称
    url: "", // 图片地址
    enable_status: null, //是否启用
    href: "", //图片跳转地址
    weight: 0, //推荐值
    type: null, //跳转类型
});
const rules = reactive({
    name: [
        {
            required: true,
            message: "请输入名称",
            trigger: "blur",
        },
        // {
        //     min: 3,
        //     max: 5,
        //     message: "Length should be 3 to 5",
        //     trigger: "blur",
        // },
    ],
    enable_status: [
        {
            required: true,
            message: "请选择是否启用",
            trigger: "change",
        },
    ],
    href: [
        {
            required: true,
            message: "请输入图片跳转地址",
            trigger: "blur",
        },
    ],
    type: [
        {
            required: true,
            message: "请选择图片跳转类型",
            trigger: "change",
        },
    ],
    weight: [
        {
            required: true,
            message: "请设置推荐值",
            trigger: "blur",
        },
    ],
    url: [
        {
            required: true,
            message: "请上传图片",
            trigger: "change",
        },
    ],
});
// 提交新建轮播数据
const addBanner = (formEl) => {
    console.log("formEL: ");
    if (!formEl) return;
    formEl.validate(async (valid, fields) => {
        if (valid) {
            if (formData.value.id) {
                const id = formData.value.id;
                delete formData.value.id; //删除id
                await PutUpdata(formData.value, id);
            } else {
                formData.value.enable_status = Number(
                    formData.value.enable_status
                );
                formData.value.type = Number(formData.value.type);
                // console.log(formData.value);
                await PostBannerStore(formData.value);
            }
            dialogFormVisible.value = false;
            Refresh();
        } else {
            console.log("提交错误,原因: ", fields);
        }
    });
};
const imageUrl = ref(null);
const uploadData = ref(); //图片文件
// 图片上传
const uploadFile = async (item) => {
    // console.log(item);
    uploadData.value = item.raw; // 图片文件
    let fileData = new FormData();
    fileData.append("file", uploadData.value);
    await PostUpload(fileData).then(
        (res) => {
            // console.log(res);
            formData.value.url = res.data.data.full_url;
            imageUrl.value = formData.value.url;
        },
        (err) => {
            console.log(err);
        }
    );
};
// 更新轮播图数据 编辑
const updataBanner = (row) => {
    if (formData.value.id) {
        delete formData.value.id; //删除id
    }
    dialogFormVisible.value = true;
    formTitle.value = "编辑";
    formData.value = {
        name: row.name,
        url: row.full_url,
        enable_status: row.enable_status,
        href: row.href,
        weight: row.weight,
        type: row.type,
        id: row.id,
    };
    imageUrl.value = formData.value.url;
    // console.log(formData.value);
};
// 删除轮播图数据 删除-button
const deleteBanner = async (row) => {
    if (!row) return;
    ElMessageBox.confirm('确定删除 "' + row.name + '" 吗?', "删除轮播图信息", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "deleteMessageBox",
    })
        .then(async () => {
            await deleteData(row.id);
            Refresh();
            ElMessage({
                type: "success",
                message: "成功删除 " + row.name,
            });
        })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "取消操作",
            });
        });
};
</script>
    
<style lang="scss">
.bannerLayout {
    .contentLayout {
        padding: 0 24px 16px;
        background: #fff;
        .tableSet {
            padding: 16px 0;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            & > div {
                padding: 8px;
                .el-dropdown {
                    color: var(--color-text);
                }
                .addI0 {
                    padding: 6px 15px;
                    color: #fff;
                    background: var(--color-high-text);
                    border: 1px solid var(--color-high-text);
                    border-radius: 5%;
                    display: flex;
                    justify-content: space-between;
                    // align-items: center;
                    // line-height: 32px;
                    // height: 32px;
                    .iconPlus {
                        padding-top: 1px;
                    }
                    .text {
                        padding-left: 8px;
                    }
                }
            }
        }
        .tabContent {
            .btou {
                background: #fafafa !important;
                font-weight: 500;
                .cell {
                    border-left: 1px solid #0000000f;
                    color: var(--color-text);
                }
            }
            // .el-table--large .el-table__cell {
            // }
            .cell {
                color: var(--color-text);
            }
            .del {
                color: #1890ff;
                font-size: 14px;
                padding: 0;
            }
            .el-table_1_column_1:not(.btou) {
                padding-left: 5px;
            }
        }
        // 分页组件
        .pageCom {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            margin-top: 16px;
            li.is-active {
                border: 1px solid var(--color-high-text);
                font-weight: 500;
            }
            .number {
                font-size: 14px;
            }
        }
        // 新建-编辑 表单样式
        .el-dialog {
            padding: 0;
            .el-dialog__header.show-close {
                padding: 16px 24px;
                display: flex;
                align-items: center;
                justify-content: space-between;
                border-bottom: 1px solid var(--border-color-tint);
                .el-dialog__title {
                    display: block;
                    padding: 0;
                    margin: 0;
                    font-size: 16px;
                    line-height: 22px;
                    color: var(--color-text);
                }
                .el-dialog__headerbtn {
                    width: 60px;
                    height: 60px;
                    font-size: 20px;
                }
            }
            .el-dialog__body {
                padding: 24px;

                //新建轮播图的表单项
                .el-form-item__label {
                    color: var(--color-text);
                }
                // 表单上传图片
                .uploadImg {
                    width: 102px;
                    height: 102px;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                    border: 1px dashed #d9d9d9;
                    background: var(--color-background-2);
                    color: var(--color-text);
                }
                // .el-form-item__content {
                // border: 1px solid #d9d9d9;
                // }
                .el-form-item__content div {
                    color: var(--color-text);
                    .el-input__inner {
                        color: var(--color-text);
                    }
                }
            }
            .el-dialog__footer {
                padding: 10px 16px;
                border-top: 1px solid var(--border-color-tint);
                .el-button {
                    padding: 8px 17px;
                }
            }
        }
        .el-overlay {
        }
    }
}
</style>